{% include 'public/body.html' %}

{% block title %}

    密码找回
{% endblock %}

{% block main %}
    <!-- 网站主体 -->
    <div id="main">
        <section class="ct">
            <!-- 上传表单-->
            <div class="upload">
                <h1>密码找回</h1>
                <form>

                    <p>
                        <label>输入账号：</label>
                        <input class="upt" type="text" name="" v-model="username"
                               placeholder="请输入您要找回密码的账号"/>

                    </p>
                    <p>
                        <label>输入邮件：</label>
                        <input class="upt" type="text" name="" v-model="email"
                               placeholder="请输入您账号注册时绑定的邮箱"/>
                        <em></em>
                    </p>

                    <p>
                        <label></label>
                        <!-- 邮件发送完后，可以使用 disable属性禁用 按钮 -->
                        <button class="btn" :disabled="btnDisabled" @click="findpass">确认找回</button>
                    </p>
                </form>
            </div>
        </section>
    </div>

{% endblock %}

{% block vue %}
    <script>
        Vue.createApp({
            data() {
                return {
                    username: '',
                    email: '',
                    btnDisabled: false, //是否禁用按钮
                }
            },
            methods: {
                findpass() {
                    if (!this.username) {
                        layer.msg('账号不能为空', {icon: 5})
                        return
                    }
                    if (!this.email) {
                        layer.msg('邮箱不能为空', {icon: 5})
                        return
                    }
                    this.btnDisabled = true
                    axios.post('/findpass/', {username: this.username, email: this.email},
                        {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
                        .then(res => {
                            if (res.data.code === 200) {
                                layer.msg(res.data.msg, {icon: 6})
                                setTimeout(() => {
                                    this.btnDisabled = false
                                    location.href = `/modifypass/${res.data.id}/`
                                }, 1500)
                            } else {
                                layer.msg(res.data.msg, {icon: 5})
                                this.btnDisabled = false

                            }


                        })
                }
            }
        }).mount("#main")


    </script>

{% endblock %}
